home *** CD-ROM | disk | FTP | other *** search
/ Computer Shopper 233 / Computer Shopper 233 / ComputerShopperDVD233.iso / mpf / eng / shared / agentdui.cab / scui.dll / HTML / TABSTRIP.HTC < prev    next >
Encoding:
Text File  |  2005-07-27  |  9.3 KB  |  321 lines
  1. <PUBLIC:HTC URN="tabstrip">
  2. <PUBLIC:ATTACH EVENT="ondocumentready" HANDLER="DoInit" />
  3. <PUBLIC:ATTACH EVENT="onclick" HANDLER="DoClick" />
  4. <PUBLIC:ATTACH EVENT="onmouseover" HANDLER="DoMouseOver" />
  5. <PUBLIC:ATTACH EVENT="onmouseout" HANDLER="DoMouseOut" />
  6.  
  7. <PUBLIC:METHOD NAME="SelectTab" />
  8.  
  9. <PUBLIC:EVENT NAME="onShowPage" ID="spID"/>
  10.  
  11. <PUBLIC:PROPERTY NAME="title" />
  12. <PUBLIC:PROPERTY NAME="src" />
  13. <PUBLIC:PROPERTY NAME="selectedImg"/>
  14. <PUBLIC:PROPERTY NAME="img" />
  15. <PUBLIC:PROPERTY NAME="ColorBorder" />
  16. <PUBLIC:PROPERTY NAME="ColorSelectedTab" />
  17. <PUBLIC:PROPERTY NAME="ColorSelectedTabText" />        
  18. <PUBLIC:PROPERTY NAME="ColorGrayedTab" />            
  19. <PUBLIC:PROPERTY NAME="ColorGrayedTabText" />
  20. <PUBLIC:PROPERTY NAME="ColorTab" />
  21. <PUBLIC:PROPERTY NAME="ColorTabText" />
  22. <PUBLIC:PROPERTY NAME="ColorTabTextMouseOver" />    
  23. <PUBLIC:PROPERTY NAME="FontStyle" />    
  24. <PUBLIC:PROPERTY NAME="selected" />
  25. <PUBLIC:PROPERTY NAME="grayed" />
  26. <PUBLIC:PROPERTY NAME="label" />
  27. <PUBLIC:PROPERTY NAME="margin" />
  28. <PUBLIC:PROPERTY NAME="topDiv" />
  29. <PUBLIC:PROPERTY NAME="tmDiv" />
  30. <PUBLIC:PROPERTY NAME="tmoDiv" />
  31. <PUBLIC:PROPERTY NAME="botDiv" />
  32. <PUBLIC:PROPERTY NAME="bmDiv" />
  33. <PUBLIC:PROPERTY NAME="noDiv" />
  34.  
  35. <SCRIPT LANGUAGE="jscript">
  36.  
  37. var g_curColor = "";
  38. var g_curIndex = 0;
  39.  
  40. function DoInit() {
  41.     SetDefaults();
  42.     BuildTabStrip();
  43. }
  44.  
  45. /*
  46. // SetDefaults
  47. // Sets default values and initializes some common-use variables
  48. */
  49. function SetDefaults() {
  50.  
  51.     if (FontStyle == null)     
  52.         FontStyle = "font-Family:Tahoma,Arial,Verdana;font-Size:11px;font-weight:bold;";
  53.     if (ColorTab == null)     
  54.         ColorTab = "#CC0033";
  55.     if (ColorTabText == null)
  56.         ColorTabText = "#FFFFFF";
  57.     if (ColorGrayedTab == null)     
  58.         ColorGrayedTab = "#000000";
  59.     if (ColorGrayedTabText == null)     
  60.         ColorGrayedTabText = "gainsboro";
  61.     if (ColorSelectedTab == null)
  62.         ColorSelectedTab = "#FFFFFF";
  63.     if (ColorSelectedTabText == null)
  64.         ColorSelectedTabText = "#000000";
  65.     if (ColorTabTextMouseOver == null)
  66.         ColorTabTextMouseOver = "#CC0033";
  67.     if (ColorBorder == null)
  68.         ColorBorder = "#CC0033";
  69.     if (label == null)
  70.         label = "";
  71.     if (margin == null)
  72.         margin = 0; 
  73.     
  74.     aSrcs = new Array();
  75.     aSelectedImg = new Array();
  76.     aImg = new Array();
  77.  
  78.     aDisabled = new Array();
  79.     selItem = 0;
  80.     window.document.body.style.margin = margin;
  81. }
  82.  
  83. /*
  84. // BuildTabStrip
  85. // Creates the (rather complex) structure of <TABLE> to provide
  86. // the tabs. Loops through the child items to extract info
  87. */
  88. function BuildTabStrip() {
  89.     
  90.     // begin group
  91.     str = "<table border=0 cellpadding=0 cellspacing=0 height=100% width=100% valign=top>"
  92.     
  93.     // loops through children
  94.     for (i=0; i<children.length; i++) {
  95.         
  96.         aSrcs[i] = children[i].src;        
  97.         aSelectedImg[i] = children[i].selectedImg;
  98.         aImg[i] = children[i].img;
  99.         
  100.         // Normal status settings
  101.         aDisabled[i] = 0;
  102.         sColorTab = ColorTab;
  103.         sTitle = children[i].title;
  104.         sForeColor = ColorTabText;
  105.         
  106.         // Grayed status settings
  107.         if (children[i].grayed != null) {
  108.             aDisabled[i] = 1;
  109.             sTitle = "<i>" + children[i].title + "</i>";
  110.             sColorTab = ColorGrayedTab;
  111.             sForeColor = ColorGrayedTabText;
  112.         }
  113.         
  114.         if (children[i].selected != null) {
  115.             if (selItem == 0)    selItem = i;
  116.             sForeColor = ColorSelectedTabText;
  117.         }
  118.         
  119.         // text for children
  120.         str += "<tr><td width=1 bgcolor='"+ColorBorder+"'></td><td valign=top>";
  121.         
  122.         str += "<table border=0 id=myTable cellpadding=0 cellspacing=0>";
  123.         str += "<tr width=94 height=17><TD colspan=4 bgcolor='"+ColorSelectedTab+"'>"
  124.         str += "<img id=myBDiv width=94 height=17 bgcolor='" + ColorSelectedTab + "' border=0 src='"+noDiv+"'></td></tr>"
  125.         str += "<tr><td width=2 bgcolor='"+ColorBorder+"'><img border=0 width=2 height=0></td><td height=66 style='cursor:hand;' width=80 id=myTD align=center ";
  126.         str += "style=" + FontStyle + "color:" + sForeColor + ">";
  127.         if (null != children[i].img)
  128.             str += "<img align=center id=myIMG src=" + children[i].img + "><br>";
  129.         str += sTitle;
  130.         str += "</td><td id=myRtBorder width=2 bgcolor='"+ColorBorder+"'><img border=0 width=2 height=0></td>"
  131.         str += "<td width=10 bgcolor='white'><img border=0 width=2 height=0></td></tr>"
  132.         str += "</table></td></tr>";
  133.         
  134.     }
  135.     
  136.     str += "<tr height=100% width=100%><td width=1 bgcolor='"+ColorBorder+"'><img border=0 width=1></td><td valign=top>"
  137.     str += "<table border=0 height=100% cellpadding=0 cellspacing=0 border=0><tr height=17><td colspan=4 bgcolor='"+ColorSelectedTab+"'>"
  138.     str += "<img id=myBDiv width=94 height=17 border=0 src='"+noDiv+"'></td></tr>"
  139.     str += "<tr height=100%><td width=2 bgcolor='"+ColorBorder+"'><img border=0 width=2 height=0></td>"
  140.     str += "<td width=80 bgcolor='"+ColorTab+"'><img border=0 width=80 height=0></td><td width=2 bgcolor='"+ColorBorder+"'><img border=0 width=2 height=0></td>"
  141.     str += "<td width=10 bgcolor='"+ColorSelectedTab+"'><img border=0 width=2 height=0></td></tr>"
  142.  
  143.     str += "</table></td></tr> <tr><td width=1 bgcolor='"+ColorBorder+"'></td><td valign=top>";
  144.     str += "<table border=0 height=100% cellpadding=0 cellspacing=0 border=0><tr height=17><td bgcolor='"+ColorSelectedTab+"'>"
  145.     str += "<img id=myBDiv width=94 height=17 border=0 src='"+bmDiv+"'></td></tr></table></td></tr>"
  146.     str += "<tr><td colspan=2 height=1 bgcolor='"+ColorBorder+"'></td></tr>"
  147.  
  148.     // ends group
  149.     str += "</table>";
  150.  
  151.     // writes to the page
  152.     element.innerHTML = str;
  153.     
  154.     myBDiv[0].src = tmDiv
  155.     // hilites the selected element in the tabstrip
  156.     HiliteItem(selItem);
  157.  
  158.     oEvent = createEventObject();
  159.     oEvent.result = aSrcs[selItem].toString();
  160.     spID.fire(oEvent);
  161. }
  162.  
  163.  
  164. /*
  165. // DoClick
  166. // Executes the code in response to a user click on a tab.
  167. // Basically, it switches between child pages and changes
  168. // UI features
  169. */
  170. function DoClick()
  171. {
  172.     eTD = window.event.srcElement;
  173.     ResetTabs(eTD);
  174. }
  175.  
  176. function ResetTabs(eTD)
  177. {
  178.     try
  179.     {
  180.         tabName = eTD.innerText;
  181.  
  182.         if (eTD.id == "myIMG")
  183.         {
  184.             for (i=0; i<myIMG.length; i++) 
  185.             {
  186.                 if (!aDisabled[i]) 
  187.                 {
  188.                     if (myIMG[i].src == eTD.src)
  189.                         eTD = myTD[i];
  190.                 }
  191.             }
  192.         }
  193.  
  194.         if (eTD.id != "myTD")    return;
  195.         if (eTD.style.color == ColorGrayedTabText)    return;
  196.         if (eTD.style.color == ColorSelectedTabText)    return;
  197.   
  198.         if (!aDisabled[g_curIndex]) {
  199.             myTD[g_curIndex].style.background = ColorTab;    
  200.             myTD[g_curIndex].style.color = ColorTabText;            
  201.             myTD[g_curIndex].style.cursor = "hand";
  202.             myTable[g_curIndex].style.background = ColorTab;    
  203.             //myTD[g_curIndex].style.fontWeight = "";
  204.             if (0 == g_curIndex)
  205.                 myBDiv[g_curIndex].src = tmDiv
  206.             else
  207.                 myBDiv[g_curIndex].src = noDiv
  208.             myBDiv[g_curIndex+1].src = noDiv
  209.     
  210.             if (null != aImg[g_curIndex])
  211.                 myIMG[g_curIndex].src = aImg[g_curIndex]
  212.  
  213.             myRtBorder[g_curIndex].style.background = ColorBorder
  214.         }
  215.             
  216.         for (i=0; i<myTD.length; i++) 
  217.         {
  218.             if (myTD[i].innerHTML == eTD.innerHTML)
  219.                 selItem = i;
  220.         }
  221.  
  222.         g_curColor = ColorSelectedTabText;
  223.         HiliteItem(selItem);
  224.  
  225.         oEvent = createEventObject();
  226.         oEvent.result = aSrcs[selItem].toString();
  227.         spID.fire(oEvent);
  228.     }
  229.     catch (e)
  230.     {
  231.     }
  232. }
  233.  
  234. function SelectTab(index)
  235. {
  236.     var eTD;
  237.  
  238.     eTD = myIMG[index];
  239.     ResetTabs(eTD);
  240.     HiliteItem(index);
  241.  
  242.     oEvent = createEventObject();
  243.     oEvent.result = aSrcs[selItem].toString();
  244.     spID.fire(oEvent);
  245. }
  246.  
  247. /*  
  248. // HiliteItem
  249. // Changes the UI attributes for the selected tab
  250. */
  251. function HiliteItem(index) 
  252. {
  253.     try
  254.     {
  255.         myTD[index].style.background = ColorSelectedTab;
  256.         myTable[index].style.background = ColorSelectedTab;    
  257.         myTD[index].style.color = ColorSelectedTabText;
  258.         myTD[index].style.cursor = "default";
  259.     
  260.         if (0 == index)
  261.             myBDiv[index].src = tmoDiv
  262.         else
  263.             myBDiv[index].src = topDiv
  264.  
  265.         myBDiv[index+1].src = botDiv
  266.  
  267.         if (null != aSelectedImg[index])
  268.         {
  269.             myIMG[index].src = aSelectedImg[index]
  270.         }
  271.  
  272.         myRtBorder[index].style.background = ColorSelectedTab
  273.         g_curIndex = index;
  274.     }
  275.     catch (e)
  276.     {
  277.     }
  278. }
  279.  
  280.  
  281. /*
  282. // DoMouseOver
  283. // Executes the code to highlight the tab where the mouse
  284. // is currently hovering over
  285.  
  286. function DoMouseOver() {
  287.     eTD = window.event.srcElement;
  288.     g_curColor = eTD.style.color;
  289.     if (eTD.tagName == "TD") {
  290.         if (eTD.style.background != ColorSelectedTab &&
  291.             eTD.innerText != "" &&
  292.             eTD.style.color != ColorGrayedTabText &&
  293.               eTD.id == "myTD") 
  294.         {            
  295.             //eTD.style.color = ColorTabTextMouseOver;
  296.             //eTD.style.textDecoration = "underline";
  297.             //eTD.style.cursor = "hand";
  298.         }
  299.         else {
  300.             //eTD.style.cursor = "default";
  301.         }
  302.     }
  303.     //else if (eTD.tagName == "IMG")
  304.     //{
  305.     //    eTD.style.cursor = "hand";
  306.     //}
  307. }
  308.  
  309. function DoMouseOut() {
  310.     eTD = window.event.srcElement;
  311.     if (eTD.style.color != ColorGrayedTabText) {    
  312.         //eTD.style.cursor = "";    
  313.         eTD.style.color = g_curColor; //"";
  314.         //eTD.style.textDecoration = "none";        
  315.     }
  316. }
  317. */
  318.  
  319. </SCRIPT>
  320.  
  321. </PUBLIC:HTC>